<template>
	<view class="content">
		<view class="info">
			<view class="info-box">
				<view class="title">认证名称：</view>
				<view>{{ info.firm }}</view>
			</view>
			<view class="info-box">
				<view class="title">证件编号：</view>
				<view>{{ info.credit }}</view>
			</view>
			<view class="info-box">
				<view class="title">证件照片：</view>
				<view><image :src="info.business" mode="widthFix" class="business-img"></image></view>
			</view>
			<view class="info-box  identity">
				<view class="title">身份信息：</view>
				<view class="identity-img">
					<image :src="info.identity[0]" mode="scaleToFill"></image>
					<image :src="info.identity[1]" mode="scaleToFill"></image>
				</view>
			</view>
		</view>
		<view class="ipt">
			<textarea type="textarea" v-model="reason" auto-height placeholder="不符合要求的认证信息,请填写驳回认证的原因" placeholder-style="font-size:24rpx;"></textarea>
		</view>
		<view class="btn">
		  <view class="pass" @click="let_pass">审核通过</view>
		  <view class="alter" @click="reject">驳回修改</view>
		</view>
		<u-modal v-model="model_show" :show-cancel-button="model_show_cancel" :content="model_content" @confirm="model_confirm(event_type)" @cancel="model_cancel" :async-close="true"> </u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				info: {
					identity: []
				},
				reason: '',
				// 模态框
				model_content: '',
				model_show: false,
				model_show_cancel: true,
				event_type: ''
			}
		},
		onLoad(option) {
			this.id = option.id;
			if(this.id) {
				this.getDetail(this.id);
			}
		},
		methods: {
			getDetail(id) {
				this.$u.api.KF_get_sgc_detail({
					id
				}).then(res => {
					if(res.code === 200) {
						this.info = res.data;
					}
				})
			},
			// 审核通过
			let_pass() {
				this.model_content = '确定要审核通过吗?'
				this.model_show = true
				this.event_type = 'pass'
			},
			// 审核驳回
			reject() {
				let nopass = 1
				if (this.reason == '') {
				  this.$refs.uToast.show({
				    title: '请填写驳回原因',
				    type: 'error'
				  })
				  return
				}
				this.event_type = 'nopass'
				this.model_content = '确定驳回吗?'
				this.model_show = true
			},
			model_cancel() {
			  this.model_show = false
			},
			// 客服点击确定
			model_confirm(type) {
			  if (type == 'pass') {
			    this.$u.api.KF_sgc_detail({
						id: this.id,
						type: 0,
						cause: ''
					}).then((res) => {
						this.model_show = false
						setTimeout(() => {
							uni.navigateBack({
								delta:1
							})
						}, 2000)
					})
			  }
			  if (type == 'nopass') {
			    this.$u.api.KF_sgc_detail({
						id: this.id,
						type: 1,
						cause: this.reason
					}).then((res) => {
						this.model_show = false
						setTimeout(() => {
							uni.navigateBack({
								delta:1
							})
						}, 2000)
					})
			  }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #F5F5F5;
		padding: 26rpx 30rpx;
	}
	.info {
		background-color: #FFFFFF;
		padding: 50rpx 30rpx;
		border-radius: 10rpx;
		.info-box {
			border-bottom: 2rpx solid #E9E9E9;
			padding: 30rpx 0;
			color: #9C9C9C;
			display: flex;
			justify-content: start;
			.title {
				font-weight: 600;
				color: #000000;
				margin-right: 20rpx;
			}
			.business-img {
				width: 400rpx;
			}
		}
		.identity {
			display: block;
			.identity-img {
				padding: 40rpx;
				image {
					width: 46%;
					height: 200rpx;
				}
				image:nth-child(1) {
					margin-right: 30rpx;
				}
			}
		}
	}
	.ipt {
		background-color: #FFFFFF;
		padding: 50rpx 30rpx;
		border-radius: 10rpx;
		margin-top: 50rpx;
	}
	.btn {
	  width: 686rpx;
	  border-radius: 10rpx;
	  margin: 0 auto;
	  color: #fff;
	  font-size: 28rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  padding: 55rpx 0;
	
	  .pass,
	  .alter {
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    width: 297rpx;
	    height: 74rpx;
	    box-shadow: 0rpx 5rpx 51rpx 0rpx rgba(98, 172, 0, 0.3);
	    border-radius: 35rpx;
	  }
	
	  .pass {
	    background: #62ac00;
	    margin-right: 18rpx;
	  }
	
	  .alter {
	    background: #e65f1c;
	  }
	}
</style>
